import React, { PureComponent } from 'react';
import { message, Form, Input, Divider, Table, Tooltip, Button } from 'antd';
import { connect } from 'dva';
import { Route, Redirect, Switch, routerRedux } from 'dva/router';
import SyOrderTableComponent from '../../components/SyOrderTableComponent';
import baseStyles from '../../components/SyOrderTableComponent/index.less';


@Form.create()
@connect(state => ({
  modelState: state.refundOrder,
}))
export default class RefundOrder extends SyOrderTableComponent {

  // 缺省
  _initSortion = { sortField: 'id', sortOrder: 'desc', };
  _initPagination = { pageSize: 10, current: 1, };
  _initCriteriaQuery = {};
  _operator = [
    // {
    //   needConfirm: true,
    //   buttonLabel: () => {  return '仅退款' },
    //   buttonDisabled: 'none',
    //   confirmTitle: '确认退款？',
    //   onClickEvent: () => {},
    //   handleEvent: () => {
    //     // this.state.editedEntity.orderId
    //   },
    // },
    // {
    //   needConfirm: true,
    //   buttonLabel: () => {  return '退款退货' },
    //   buttonDisabled: 'none',
    //   confirmTitle: '确认退款+退货？',
    //   handleEvent: () => {
    //     // this.state.editedEntity.orderId
    //   },
    // },
    // {
    //   needConfirm: true,
    //   buttonLabel: '批量驳回',
    //   buttonDisabled: 'none',
    //   confirmTitle: '确认驳回？',
    //   handleEvent: () => {
    //     // this.state.editedEntity.orderId
    //   },
    // },
  ];

  initSelection() {
    const { dispatch } = this.props;
    // dispatch({
    //   type: 'product/fetchSelectItems',
    //   payload: { service: '/product', apiUrl: '/productCategory', selectName: 'catSelectItems', current: 1, pageSize: 1000 }
    // });
  }

  componentWillMount() {
    this.initSelection();
    this.setState({
      baseModel: 'refundOrder',
      operator: this._operator,
      initPagination: this._initPagination,
      initSortion: this._initSortion,
      initCriteriaQuery: this._initCriteriaQuery,
      needSearch: true,
      needAdd: false,
      needEdit: false,
      needDelete: false,
      needTableColumnsOperator: false,
      needTableCheckbox: true,
      tableBorder: true,
      // defaultExpandAllRows: true,
      entityStatus: [
        { name: '全部', value: '' },
        { name: '退款中', value: '1' },
        { name: '已关闭', value: '2' },
        { name: '已完成', value: '3' },
      ],
      statusField: 'orderStatus',
      statusQuery: { status: '' },
      tableScroll: { y: 800 },
      tableColumns: [
        {
          title: '订单编号',
          dataIndex: 'orderId',
          width: 120,
          render: val => val ? `${val}` : '/'
        },
        {
          title: '客户姓名',
          dataIndex: 'products[0].user.name',
          width: 70,
          render: val => val ? `${val}` : '/'
        },
        {
          title: '客户ID',
          dataIndex: 'products[0].user.id',
          width: 60,
          render: val => val ? `${val}` : '/'
        },
        // {
        //   title: '商品',
        //   dataIndex: 'products[0].backProduct.imgPath',
        //   width: 90,
        //   className: baseStyles.nopadding,
        //   render: (text, record) =>
        //     (text) ?
        //       (
        //         <img style={{ width: 60, height: 60, cursor: 'pointer', margin: 6, }} src={record.products[0].backProduct.imgPath}
        //           onClick={() => {
        //             let values = [];
        //             values.push({ title: 'imgPath', src: record.products[0].backProduct.imgPath });
        //             this.onImageViewClick(values)
        //           }} />
        //       )
        //       :
        //       <span style={{ color: '#e8e8e8' }}> / </span>
        // },
        // {
        //   title: '',
        //   dataIndex: 'products[0].productName',
        //   width: 600,
        //   render: (text, record) =>
        //     <div >
        //       <span>
        //         {record.products[0].backProduct.productName}
        //       </span>
        //       <Divider style={{ margin: '3px 0px' }} />
        //       <span>
        //         {record.products[0].backProduct.id}
        //       </span>
        //     </div>,
        // },
        {
          title: '退款编号',
          dataIndex: 'products[0].backProduct.id',
          width: 120,
          render: val => val ? `${val}` : '/'
        },
        {
          title: '退货方式',
          dataIndex: 'products[0].backProduct.type',
          width: 70,
          render: val => val ? `${val === "RETURN" ? '退货' : val}` : '/'
        },
        {
          title: '申请时间',
          dataIndex: 'products[0].backProduct.createTime',
          width: 120,
          sorter: true,
          render: val => val ? `${val}` : '/'
        },
        // {
        //   title: '退货数量',
        //   dataIndex: 'products[0].backProduct.number',
        //   width: 70,
        //   render: val => val ? `${val}` : '/'
        // },
        {
          title: '订单金额',
          dataIndex: 'products[0].backProduct.totalPrice',
          width: 70,
          render: (text, record) =>
            <span>
              {record.products[0].backProduct.totalPrice ? ('¥ ' + record.products[0].backProduct.totalPrice) : '/'}
            </span>
        },
        {
          title: '退款状态',
          dataIndex: 'products[0].backProduct.status',
          width: 80,
          render: (text, record) =>
            <span>
              {this.returnStatus(record.products[0].backProduct.status)}
            </span>
        },
        {
          title: '操作',
          dataIndex: 'products[0].user.getuiId',
          width: 70,
          render: (text, record, index) => {
            return <a onClick={() => this.jumpDetail(record)} href="javascript:;">查看详情</a>
          }
        },
      ],
      expandedRowRender: this.expandedOrderItemRender,
      searchFormItem: [
        {
          name: 'orderId',
          label: '订单号',
          placeholder: '订单号',
          type: 'string',
        },
        {
          name: 'backProductId',
          label: '退款单号',
          placeholder: '退款单号',
          type: 'string',
        },
        {
          name: 'rangeType_Date',
          label: '订单时间',
          placeholder: '',
          type: 'rangerTime',
        },
        {
          name: 'status',
          label: '退款状态',
          placeholder: '',
          type: 'select',
          selectOption: [{
             name: '申请阶段',
             value: '10',
          }, {
            name: '审核失败',
             value: '20',
          }, {
            name: '审核中',
             value: '21,22',
          }, {
            name: '收货中',
             value: '31,32',
          }, {
            name: '处理中',
             value: '33,34',
          }, {
            name: '退款中',
             value: '40',
          }, {
            name: '退款成功',
             value: '50',
          }],
        },
      ],
      simpleAddFormItem: [
      ],
      simpleEditFormItem: [
      ],
    });
  }

  jumpDetail = (row) => {
    const { dispatch } = this.props;
    // dispatch(routerRedux.push({ pathname: '/orderManagement/refundOrderDetail', state: {id: row.products[0].backProduct.id}}));
    sessionStorage.setItem('backProductId', row.products[0].backProduct.id);
    let win = window.open('#/orderManagement/refundOrderDetail', '_blank');
    win.focus();
  };


  returnStatus = (val) => {
    switch(parseInt(val)) {
      case 10:
        return '申请阶段' 
        break;
      case 20:
        return '审核失败' 
        break;
      case 21:
      case 22:
        return '审核中' 
        break;
      case 31:
      case 32:
        return '收货中' 
        break;
      case 33:
      case 34:
        return '处理中'
        break;
      case 40:
        return '退款中'
        break;
      case 50:
        return '退款成功'
        break;
      default:
        return val
        break;
    }
  }

  expandedOrderItemRender = (record) => {
    const columns = [
      {
        title: '商品',
        dataIndex: 'backProduct.imgPath',
        width: 90,
        className: baseStyles.nopadding,
        render: (text, record) =>
          (text) ?
            (
              <img style={{ width: 60, height: 60, cursor: 'pointer', margin: 6, }} src={record.backProduct.imgPath}
                onClick={() => {
                  let values = [];
                  values.push({ title: 'imgPath', src: record.backProduct.imgPath });
                  this.onImageViewClick(values)
                }} />
            )
            :
            <span style={{ color: '#e8e8e8' }}> / </span>
      },
      {
        title: '',
        dataIndex: 'productName',
        width: 600,
        render: (text, record) =>
          <div >
            <span>
              {record.backProduct.productName}
            </span>
            <Divider style={{ margin: '3px 0px' }} />
            <span>
              {record.backProduct.id}
            </span>
          </div>,
      },
      // {
      //   title: '退货方式',
      //   dataIndex: 'backProduct.type',
      //   width: 180,
      //   render: val => `${val === "RETURN" ? '退货' : val}`
      // },
      // {
      //   title: '申请时间',
      //   dataIndex: 'backProduct.createTime',
      //   width: 180,
      // },
      {
        title: '退货数量',
        dataIndex: 'backProduct.number',
        width: 180,
      },
      // {
      //   title: '订单金额',
      //   dataIndex: 'backProduct.totalPrice',
      //   width: 180,
      //   render: (text, record) =>
      //     <span>
      //       {record.backProduct.totalPrice ? ('¥ ' + record.backProduct.totalPrice) : '/'}
      //     </span>
      //   ,
      // },
      // {
      //   title: '退款状态',
      //   dataIndex: 'backProduct.status',
      //   render: (text, record) =>
      //     <span>
      //       {this.returnStatus(record.backProduct.status)}
      //     </span>
      // },
    ];

    const data = record.products;
    return (
      <Table
        // showHeader={false}
        columns={columns}
        dataSource={data}
        pagination={false}
        bordered={false}
      // size='small'
      />
    );
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    super.componentDidMount();
  }

}
